<template>
    <div class="col card p10">
        <label class="title" style="text-align: center;">加热器控制</label>
        <el-switch @click="onClickReserve" v-model="ctx.reserve" active-text="蓄热罐加热器"/>
        <el-switch @click="onClickTank1" v-model="ctx.tank1" active-text="加热罐1加热器"/>
        <el-switch @click="onClickTank2" v-model="ctx.tank2" active-text="加热罐2加热器"/>
    </div>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';
import { heatState } from '../../service/heat_def';
import { sw_ctrl } from '../../service/heat_cmd';
import { dialog } from '../../service/ui';


interface Ctx {
    reserve: boolean,
    tank1: boolean,
    tank2: boolean,
}

const ctx = reactive<Ctx>({
    reserve: heatState.ctrl.reserve_heat,
    tank1: heatState.ctrl.tank1_heat,
    tank2: heatState.ctrl.tank2_heat,
});

watch(() => heatState.ctrl, ()=>{
    ctx.reserve = heatState.ctrl.reserve_heat;
    ctx.tank1 = heatState.ctrl.tank1_heat;
    ctx.tank2 = heatState.ctrl.tank2_heat;
});

async function ctrl(id: number, v: boolean) {
    try {
        await sw_ctrl(id, v);
    } catch (msg) {
        dialog.err(msg);
    }
}

async function onClickReserve() {
    ctrl(0, ctx.reserve);
}

async function onClickTank1() {
    ctrl(1, ctx.tank1);
}

async function onClickTank2() {
    ctrl(2, ctx.tank2);
}

</script>
